<template>
  <div>
    <vxe-form
      title-colon
      ref="xForm"
      title-align="right"
      title-width="100"
      :data="formData"
      :rules="formRules"
      :loading="loading2"
      @submit="submitEvent"
      @reset="resetEvent"
    >
      <vxe-form-gather span="24" class="gather">
        <vxe-form-item
          title="名字"
          field="name"
          span="12"
          :item-render="{}"
          title-overflow="title"
        >
          <template #default>
            <vxe-input
              v-model="formData.name"
              type="text"
              placeholder="请输入名字"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>

        <vxe-form-item
          title="昵称"
          field="nickname"
          span="12"
          :item-render="{}"
          title-overflow="title"
        >
          <template #default>
            <vxe-input
              v-model="formData.nickname"
              type="text"
              placeholder="请输入昵称"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>

        <vxe-form-item
          title="性别"
          field="sex"
          span="12"
          :item-render="{}"
          title-overflow
        >
          <template #default>
            <vxe-select
              v-model="formData.sex"
              placeholder="请选择性别"
              clearable
            >
              <vxe-option value="1" label="女"></vxe-option>
              <vxe-option value="2" label="男"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item
          title="年龄"
          field="age"
          span="12"
          :item-render="{}"
          title-overflow="title"
        >
          <template #default>
            <vxe-input
              v-model="formData.age"
              type="integer"
              placeholder="请输入年龄"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item
          title="时间"
          field="date"
          span="12"
          :item-render="{}"
          title-overflow="ellipsis"
        >
          <template #default>
            <vxe-input
              v-model="formData.date"
              type="date"
              placeholder="请选择日期"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>

        <vxe-form-item
          title="账号"
          field="account"
          span="12"
          :item-render="{}"
          title-overflow="title"
        >
          <template #default>
            <vxe-input
              v-model="formData.account"
              type="number"
              placeholder="请输入账号"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>

        <vxe-form-item
          title="密码"
          field="password"
          span="12"
          :item-render="{}"
          title-overflow="title"
        >
          <template #default>
            <vxe-input
              v-model="formData.password"
              type="password"
              placeholder="请输入密码"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>

        <vxe-form-item
          title="确认密码"
          field="passworder"
          span="12"
          :item-render="{}"
          title-overflow="title"
        >
          <template #default>
            <vxe-input
              v-model="formData.passworder"
              type="password"
              placeholder="请再次输入密码"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>
      </vxe-form-gather>
      <vxe-form-gather span="24">
        <vxe-form-item title="描述" field="address" span="12" :item-render="{}">
          <template #default>
            <vxe-textarea
              v-model="formData.address"
              placeholder="请输入具体描述"
              :autosize="{ minRows: 6, maxRows: 10 }"
              clearable
            ></vxe-textarea>
          </template>
        </vxe-form-item>

        <vxe-form-item
          title="头像"
          field="imageUrl"
          span="12"
          :item-render="{}"
        >
          <template #default>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
            </el-upload>
          </template>
        </vxe-form-item>
      </vxe-form-gather>

      <vxe-form-item align="center" span="24" :item-render="{}">
        <template #default>
          <vxe-button type="submit" status="primary">提交</vxe-button>
          <vxe-button type="reset">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script>
import { Plus } from "@element-plus/icons";
import { ElMessage } from "element-plus";
export default {
  name:'AddAccount',
  components: {
    Plus,
  },
  data() {
    return {
      imageUrl: "",
      loading2: false,
      formData: {
        name: "小廖",
        nickname: "那啥",
        sex: "男",
        age: "23",
        date: "2021-10-11",
        account: "2358919402",
        password: "123456",
        passworder: "123456",
        address: "搞事情",
        imageUrl: "",
      },
      formRules: {
        name: [
          { required: true, message: "请输入名称" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符" },
        ],
        account: [
          { required: true, message: "请输入账号" },
          { min: 6, max: 12, message: "长度在 6 到 12 个字符" },
        ],
        password: [
          { required: true, message: "请输入密码" },
          { min: 6, max: 16, message: "长度在 6 到 16 个字符" },
        ],
        passworder: [
          { required: true, message: "请输入再次输入密码" },
          { min: 6, max: 16, message: "长度在 6 到 16 个字符" },
        ],
        nickname: [{ required: true, message: "请输入昵称" }],
        sex: [{ required: true, message: "请选择性别" }],
        // imageUrl: [{ required: true, message: "请选择头像" }],
        age: [
          { required: true, message: "请输入年龄" },
          {
            validator({ itemValue }) {
              // 自定义校验
              if (Number(itemValue) > 70 || Number(itemValue) < 18) {
                return new Error("年龄在 18 ~ 70 之间");
              }
            },
          },
        ],
        date: [{ required: true, message: "必填校验" }],
        address: [{ required: true, message: "必填校验" }],
      },
    };
  },
  methods: {
    submitEvent() {
      if (this.formData.password == this.formData.passworder) {
        console.log(this.formData);
      } else {
        ElMessage({
          message: "两次密码不一致",
          type: "warning",
        });
      }
    },
    searchEvent() {
      this.$XModal.message({ message: "查询事件", status: "info" });
    },
    resetEvent() {
      this.$XModal.message({ message: "重置事件", status: "info" });
    },
    //头像上传成功的钩子函数
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.formData.imageUrl = this.imageUrl;
    },
    //图片上传前的钩子函数，检测图片是否合格
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("Avatar picture must be JPG format!");
      }
      if (!isLt2M) {
        this.$message.error("Avatar picture size can not exceed 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-upload) {
  border: 1px dashed #ccc !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
:deep(.el-upload:hover) {
  border-color: #409eff !important;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
}
.avatar-uploader-icon svg {
  margin-top: 62px; /* (178px - 28px) / 2 - 1px */
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>